﻿<!DOCTYPE html>
<html lang="ch">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Chatriq - Chat & Taskmanager</title>
    <meta name="description"
          content="The ultimate Bootstrap based Messaging framework to help build Messaging or Chat application fast and easy. Fully responsive and crafted with modern elements and latest design">
    <meta name="keywords" content="Chatriq, chat, messaging, theme, platform"/>
    <meta name="subject" content="">
    <meta name="copyright" content="">
    <link rel="icon" href="assets/images/favicon.ico" type="image/x-icon"/>

    <link rel="stylesheet" type="text/css" href="dist/css/materialdesignicons.min.css">
    <link rel="stylesheet" type="text/css" href=""/>
    <link rel="stylesheet" type="text/css" href="assets/vendors/perfect-scrollbar/perfect-scrollbar.css">
    <link rel="stylesheet" type="text/css" href="dist/css/app.min.css">
    <link rel="stylesheet" type="text/css" href="dist/css/theme/default-theme.min.css">
</head>
<body class="default-theme">
<!-- Preloader Start -->
<div class="preloader"></div>
<!-- Preloader end -->

<!-- main wrapper start -->
<div class="main-wrapper">
    <div class="chatapp">
        <!-- navbar start -->
        <nav id="navbar" class="navbar navbar-expand-md navbar-light fixed-top bg-white border-bottom shadow-sm">
            <a class="navbar-brand" href="index.html">
                <img src="assets/images/logo.svg" width="50" height="50" class="d-inline-block align-top" alt="">
                <h1>聊天室（Netty版）</h1>
            </a>

            <div class="ml-auto d-flex align-items-center">
                <div class="iconbox iconbox-search btn-hovered-light">
                    <i class="iconbox__icon mdi mdi-magnify"></i>
                </div>
                <div class="navbar-nav">

                    <div class="dropdown user-nav">
                        <div class="user-avatar user-avatar-sm user-avatar-rounded" role="button" data-toggle="dropdown"
                             aria-haspopup="true" aria-expanded="false">
                            <div class="chatriq-user chatriq-user-01"></div>
                        </div>
                        <div class="dropdown-menu dropdown-menu-right">
                            <a class="dropdown-item" href="javascript:;">
                                <span><i class="mdi mdi-account-outline"></i></span>
                                <span>用户信息</span>
                            </a>
                            <a class="dropdown-item" href="javascript:;">
                                <span><i class="mdi mdi-account-multiple-plus-outline"></i></span>
                                <span>Invite People</span>
                            </a>

                            <a class="dropdown-item" href="javascript:;">
                                <span><i class="mdi mdi-settings-outline"></i></span>
                                <span>设置</span>
                            </a>

                            <a class="dropdown-item" href="javascript:;">
                                <span><i class="mdi mdi-help-circle-outline"></i></span>
                                <span>Help</span>
                            </a>
                            <a class="dropdown-item" href="javascript:;">
                                <span><i class="mdi mdi-comment-quote-outline"></i></span>
                                <span>Feedback</span>
                            </a>
                            <div class="dropdown-divider"></div>
                            <a class="dropdown-item" href="javascript:;">
                                <span><i class="mdi mdi-logout-variant"></i></span>
                                <span>退出登录</span>
                            </a>
                        </div>
                    </div>
                    <div class="iconbox-searchbar">
                        <formll>
                            <input type="text" class="form-control" placeholder="搜索用户昵称..." id="findUserName" autofocus>

                            <button class="search-submit" type="submit" id="findUser">
                                <i class="mdi mdi-magnify"></i>
                            </button>
                            <a href="javascript:void(0)" class="search-close">
                                <i class="mdi mdi-arrow-left"></i>
                            </a>
                        </formll>
                    </div>
                </div>
            </div>
        </nav>
        <!-- navbar end -->

        <!-- sidebar start -->
        <div class="chatapp__sidebar">
            <ul class="nav" id="myTab" role="tablist">
                <li class="nav-item">
                    <a class="nav-link" href="index.html">
                        <i class="mdi mdi-message-text-outline"></i><span>闲聊广场</span>
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link active" href="privateChat.html">
                        <i class="mdi mdi-phone-outline"></i><span>私聊</span>
                    </a>
                </li>

                <li class="nav-item">
                    <a class="nav-link" href="contacts.html">
                        <i class="mdi mdi-account-box-outline"></i><span>通讯录</span>
                    </a>
                </li>

                <!--<li class="nav-item nav-item-todo">-->
                <!--<a class="nav-link" href="todo.html" >-->
                <!--<i class="mdi mdi-checkbox-marked-outline"></i><span>To-Do</span>-->
                <!--</a>-->
                <!--</li>-->

                <!--<li class="nav-item sidebar-bottom-nav nav-item-help">-->
                <!--<a class="nav-link" href="help.html" title="Help">-->
                <!--<i class="mdi mdi-help-circle-outline"></i><span>Help</span>-->
                <!--</a>-->
                <!--</li>-->
            </ul>
        </div>
        <!-- sidebar end -->

        <!-- main content start -->
        <div class="chatapp__content">
            <div class="chatapp__messagetab">
                <!-- user list start -->
                <div class="chatapp-user-list">
                    <div class="chatapp-user-list-body custom-scrollbar">
                        <div class="chatapp__headingbar">
                            <h6>当前在线</h6>
                            <div class="chatapp__actions">
                                <div class="chatapp__actions--icon">
                                    <i class="mdi mdi-heart"></i>
                                </div>
                                <div class="chatapp__actions--icon">
                                    <i class="mdi mdi-square-edit-outline"></i>
                                </div>
                                <div class="chatapp__actions--icon">
                                    <i class="mdi mdi-dots-horizontal-circle-outline"></i>
                                </div>
                            </div>
                        </div>

                        <ul class="list-unstyled" id="friendList">
                            <li class="friendLi" onclick="active(this)">
                                <div class="conversation ">

                                    <div class="user-avatar user-avatar-rounded online">
                                        <div class="chatriq-user chatriq-user-11"></div>
                                    </div>
                                    <div class="conversation__details">
                                        <div class="conversation__name">
                                            <div class="conversation__name--title">---</div>
                                            <div class="conversation__time">---</div>
                                        </div>
                                        <div class="conversation__message">
                                            <div class="conversation__message-preview">
                                                ---
                                            </div>
                                            <span><i class="mdi mdi-pin"></i></span>
                                        </div>
                                    </div>
                                </div>
                            </li>
                            <li class="friendLi" onclick="active(this)">
                                <div class="conversation">
                                    <div class="user-avatar user-avatar-rounded online">
                                        <div class="chatriq-user chatriq-user-03"></div>
                                    </div>
                                    <div class="conversation__details">
                                        <div class="conversation__name">
                                            <span class="conversation__name--title">---</span>
                                            <span class="conversation__time">---</span>
                                        </div>
                                        <div class="conversation__message">
                                            <div class="conversation__message-preview">
                                                ---
                                            </div>
                                            <span><i class="mdi mdi-volume-mute"></i></span>
                                            <span class="badge badge-primary badge-rounded">9</span>
                                        </div>
                                    </div>
                                </div>
                            </li>

                        </ul>
                    </div>

                    <ul id="mfbMenu" class="mfb-component--br mfb-slidein-spring" data-mfb-toggle="click">
                        <li class="mfb-component__wrap">
                            <a href="#" class="mfb-component__button--main">
                                <i class="mfb-component__main-icon--resting mdi mdi-plus ion-plus-round"></i>
                                <i class="mfb-component__main-icon--active mdi mdi-close ion-close-round"></i>
                            </a>
                            <ul class="mfb-component__list">
                                <li>
                                    <a href="javascript:;"
                                       data-mfb-label="Theme" class="mfb-component__button--child">
                                        <i class="mfb-component__child-icon mdi mdi-palette"></i>
                                    </a>
                                </li>

                                <li>
                                    <a href="javascript:;" data-mfb-label="Create Group"
                                       class="mfb-component__button--child">
                                        <i class="mfb-component__child-icon mdi mdi-account-group"></i>
                                    </a>
                                </li>

                                <li>
                                    <a href="javascript:;" data-mfb-label="New Call"
                                       class="mfb-component__button--child">
                                        <i class="mfb-component__child-icon mdi mdi-phone"></i>
                                    </a>
                                </li>

                                <li>
                                    <a href="javascript:;" data-mfb-label="New Chat"
                                       class="mfb-component__button--child">
                                        <i class="mfb-component__child-icon mdi mdi-android-messages"></i>
                                    </a>
                                </li>
                            </ul>
                        </li>
                    </ul>
                </div>
                <!-- user list end -->

                <!-- conversations start -->
                <div class="chatapp__conversations">
                    <!-- conversation wrapper start -->
                    <div class="conversation-wrapper">
                        <div class="conversation-panel">
                            <div class="conversation-panel__head">
                                <div class="back-button-md">
                                    <i class="mdi mdi-arrow-left"></i>
                                </div>
                                <div class="conversation-panel__avatar info-panel-opener">
                                    <div class="user-avatar user-avatar-rounded">
                                        <div class="chatriq-user chatriq-user-11"></div>
                                    </div>
                                    <div class="conversation__name">
                                        <div class="conversation__name--title" id="userName">---</div>
                                        <div class="conversation__time">---</div>
                                    </div>
                                </div>
                                <div class="conversation__actions">

                                    <div class="dropdown">
                                        <div class="action-icon" data-toggle="dropdown" role="button"
                                             aria-haspopup="true" aria-expanded="false">
                                            <i class="mdi mdi-dots-vertical"></i>
                                        </div>
                                        <div class="dropdown-menu dropdown-menu-right">
                                            <a class="dropdown-item info-panel-opener" href="javascript:;">
                                                <span><i class="mdi mdi-information-outline"></i></span>
                                                <span>View Contact</span>
                                            </a>
                                            <a class="dropdown-item" href="javascript:;">
                                                <span><i class="mdi mdi-magnify"></i></span>
                                                <span>Search</span>
                                            </a>
                                            <a class="dropdown-item" href="javascript:;">
                                                <span><i class="mdi mdi-volume-mute"></i></span>
                                                <span>Mute notifications</span>
                                            </a>
                                            <a class="dropdown-item" href="javascript:;">
                                                <span><i class="mdi mdi-wallpaper"></i></span>
                                                <span>Wallpaper</span>
                                            </a>
                                            <a class="dropdown-item" href="javascript:;">
                                                <span><i class="mdi mdi-trash-can-outline"></i></span>
                                                <span>Delete Chat</span>
                                            </a>
                                            <a class="dropdown-item" href="javascript:;">
                                                <span><i class="mdi mdi-export-variant"></i></span>
                                                <span>Export Chat</span>
                                            </a>
                                            <div class="dropdown-divider"></div>
                                            <a class="dropdown-item" href="javascript:;">
                                                <span><i class="mdi mdi-cancel"></i></span>
                                                <span>Block</span>
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="conversation-panel__body">
                                <div class="custom-scrollbar2">
                                    <div class="container">
                                        <ul class="chat-style-2" id="messageHtml">
                                            <li class="message sent">
                                                <div class="message__text" style="margin-left: 2%">
                                                    <div class="conversation__name">
                                                        <div class="conversation__name--title" style="font-size: 120%">
                                                            我：
                                                        </div>
                                                    </div>
                                                    <div style="margin-top: 2%">
                                                        <a href="/getFile">
                                                            <span style="padding-left: 5%;padding-right: 5%;font-size: 130%;font-weight: bold">杂七杂八笔记本.txt</span>
                                                            <img src="assets/images/file1.png" style="width: 100%">
                                                        </a>
                                                    </div>
                                                    <div class="metadata">
                                                        <span class="time">undefined</span>
                                                    </div>
                                                </div>
                                                <div class="user-avatar user-avatar-rounded" style="margin-left: 2%">
                                                    <div class="chatriq-user chatriq-user-11"></div>
                                                </div>
                                                <div class="message__options"><i class=" mdi mdi-dots-horizontal"></i>
                                                </div>
                                            </li>
                                            <li class="message sent">
                                                <div class="message__text" style="margin-left: 2%">
                                                    <div class="conversation__name">
                                                        <div class="conversation__name--title" style="font-size: 120%">
                                                            我：
                                                        </div>
                                                    </div>
                                                    <div style="margin-top: 2%">
                                                        <a href="/getFile">
                                                            <span style="padding-left: 5%;padding-right: 5%;font-size: 130%;font-weight: bold">杂七杂八笔记本.txt</span>
                                                            <img src="assets/images/file1.png" style="width: 100%">
                                                        </a>
                                                    </div>
                                                    <div class="metadata">
                                                        <span class="time">undefined</span>
                                                    </div>
                                                </div>
                                                <div class="user-avatar user-avatar-rounded" style="margin-left: 2%">
                                                    <div class="chatriq-user chatriq-user-11"></div>
                                                </div>
                                                <div class="message__options"><i class=" mdi mdi-dots-horizontal"></i>
                                                </div>
                                            </li>
                                            <li class="message sent">
                                                <div class="message__text" style="margin-left: 2%">
                                                    <div class="conversation__name">
                                                        <div class="conversation__name--title" style="font-size: 120%">
                                                            我：
                                                        </div>
                                                    </div>
                                                    <div style="margin-top: 2%">
                                                        <a href="/getFile">
                                                            <span style="padding-left: 5%;padding-right: 5%;font-size: 130%;font-weight: bold">杂七杂八笔记本.txt</span>
                                                            <img src="assets/images/file1.png" style="width: 100%">
                                                        </a>
                                                    </div>
                                                    <div class="metadata">
                                                        <span class="time">undefined</span>
                                                    </div>
                                                </div>
                                                <div class="user-avatar user-avatar-rounded" style="margin-left: 2%">
                                                    <div class="chatriq-user chatriq-user-11"></div>
                                                </div>
                                                <div class="message__options"><i class=" mdi mdi-dots-horizontal"></i>
                                                </div>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                            </div>

                            <div class="conversation-panel__footer">
                                <div class="composer">
                                    <div class="composer__left">
                                        <div class="composer__left--sticker">
                                            <input type="file" id="chooseImg" style="display: none" onchange="sendImg()"
                                                   accept="image/jpeg,image/png,image/jpg">
                                            <i class="mdi mdi-sticker-emoji" onclick="chooseImg()"></i>
                                            <input type="file" id="chooseFile" style="display: none"
                                                   onchange="sendFile()">
                                            <i class="mdi mdi-file-document-outline" onclick="chooseFile()"></i>
                                        </div>
                                    </div>
                                    <div class="composer__middle">
                                        <textarea class="form-control" rows="1" placeholder="请写消息..."></textarea>
                                    </div>

                                    <div class="composer__right">
                                        <div class="composer__right--send">
                                            <i class="mdi mdi-send"></i>
                                        </div>
                                        <div class="composer__right--microphone">
                                            <i class="mdi mdi-send"></i>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- conversation panel end -->

                    <!-- information panel start -->
                    <div class="information-panel">
                        <div class="information-panel__head">
                            <h5>Contact info</h5>
                            <div class="information-panel__closer">
                                <i class="mdi mdi-close"></i>
                            </div>
                        </div>

                        <div class="information-panel__body custom-scrollbar">

                            <div class="userprofile-avatar">
                                <img src="assets/images/user/150/01.jpg" alt="">
                            </div>

                            <div class="userprofile-name">
                                <h4>Jack P. Angulo</h4>
                                <span>Product Manager</span>
                                <div class="social-icon-box">
                                    <div class="social-icon">
                                        <i class="mdi mdi-facebook"></i>
                                    </div>
                                    <div class="social-icon">
                                        <i class="mdi mdi-linkedin"></i>
                                    </div>
                                    <div class="social-icon">
                                        <i class="mdi mdi-twitter"></i>
                                    </div>
                                    <div class="social-icon">
                                        <i class="mdi mdi-youtube"></i>
                                    </div>
                                </div>
                            </div>

                            <hr>

                            <table class="table table-sm table-borderless user-table-info">
                                <tr>
                                    <td><i class="mdi mdi-cellphone-android"></i></td>
                                    <td>+91 99041-99041</td>
                                </tr>
                                <tr>
                                    <td><i class="mdi mdi-web"></i></td>
                                    <td>www.jackangulo.com</td>
                                </tr>
                                <tr>
                                    <td><i class="mdi mdi-map-marker"></i></td>
                                    <td>2519 Burnside Court, HORICON, WI, 53032</td>
                                </tr>
                            </table>

                            <hr>

                            <div class="accordion accordion-ungrouped mb-3" id="accordionExample">
                                <div class="card">
                                    <div class="card-header" id="headingOne">
                                        <div class="card-title" data-toggle="collapse" role="button"
                                             data-target="#collapseOne" aria-expanded="true"
                                             aria-controls="collapseOne">
                                            <div class="acpanel__heading">
                                                <div class="acpanel__left">
                                                    <span><i class="mdi mdi-camera-outline"></i></span>
                                                    <span>Photos & Media</span>
                                                </div>
                                                <div class="acpanel__right">
                                                    <span class="badge badge-info">26</span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <div id="collapseOne" class="collapse show" aria-labelledby="headingOne"
                                         data-parent="#accordionExample">
                                        <div class="card-body">
                                            <div class="slick-slider">
                                                <div><img class="img-fluid" src="assets/images/media/01.jpg" alt="">
                                                </div>
                                                <div><img class="img-fluid" src="assets/images/media/02.jpg" alt="">
                                                </div>
                                                <div><img class="img-fluid" src="assets/images/media/03.png" alt="">
                                                </div>
                                                <div><img class="img-fluid" src="assets/images/media/04.jpg" alt="">
                                                </div>
                                                <div><img class="img-fluid" src="assets/images/media/05.jpg" alt="">
                                                </div>
                                                <div><img class="img-fluid" src="assets/images/media/06.jpg" alt="">
                                                </div>
                                                <div><img class="img-fluid" src="assets/images/media/07.jpg" alt="">
                                                </div>
                                                <div><img class="img-fluid" src="assets/images/media/04.jpg" alt="">
                                                </div>
                                                <div><img class="img-fluid" src="assets/images/media/02.jpg" alt="">
                                                </div>
                                                <div><img class="img-fluid" src="assets/images/media/04.jpg" alt="">
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div class="card">
                                    <div class="card-header" id="headingTwo">
                                        <div class="card-title collapsed d-flex justify-content-between align-items-center"
                                             role="button" data-toggle="collapse" data-target="#collapseTwo"
                                             aria-expanded="false" aria-controls="collapseTwo">
                                            <div class="acpanel__heading">
                                                <div class="acpanel__left">
                                                    <span><i class="mdi mdi-file-document-outline"></i></span>
                                                    <span>Documents</span>
                                                </div>
                                                <div class="acpanel__right">
                                                    <span class="badge badge-info">16</span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo"
                                         data-parent="#accordionExample">
                                        <div class="card-body">
                                            <ul class="list-unstyled documentlist-wrapper">
                                                <li>
                                                    <div class="doclist">
                                                        <div class="docicon iconbox btn-solid-danger">
                                                            <i class="iconbox__icon mdi mdi-file-pdf-box"></i>
                                                        </div>
                                                        <div class="doctitle">
                                                            <div class="docname">example-file.pdf</div>
                                                            <div class="docsize">217kb</div>
                                                        </div>
                                                    </div>
                                                </li>
                                                <li>
                                                    <div class="doclist">
                                                        <div class="docicon iconbox btn-solid-info">
                                                            <i class="iconbox__icon mdi mdi-file-word-box"></i>
                                                        </div>
                                                        <div class="doctitle">
                                                            <div class="docname">example-file.docs</div>
                                                            <div class="docsize">217kb</div>
                                                        </div>
                                                    </div>
                                                </li>
                                                <li>
                                                    <div class="doclist">
                                                        <div class="docicon iconbox btn-solid-success">
                                                            <i class="iconbox__icon mdi mdi-file-excel-box"></i>
                                                        </div>
                                                        <div class="doctitle">
                                                            <div class="docname">example-file.xlxs</div>
                                                            <div class="docsize">217kb</div>
                                                        </div>
                                                    </div>
                                                </li>
                                                <li>
                                                    <div class="doclist">
                                                        <div class="docicon iconbox btn-solid-warning">
                                                            <i class="iconbox__icon mdi mdi-file-powerpoint-box"></i>
                                                        </div>
                                                        <div class="doctitle">
                                                            <div class="docname">example-file.pptx</div>
                                                            <div class="docsize">217kb</div>
                                                        </div>
                                                    </div>
                                                </li>
                                                <li>
                                                    <div class="doclistall">View All</div>
                                                </li>

                                            </ul>
                                        </div>
                                    </div>
                                </div>

                                <div class="card">
                                    <div class="card-header" id="headingFour">
                                        <div class="card-title collapsed  d-flex justify-content-between align-items-center"
                                             role="button" data-toggle="collapse" data-target="#collapseFour"
                                             aria-expanded="false" aria-controls="collapseFour">
                                            <div class="acpanel__heading">
                                                <div class="acpanel__left">
                                                    <span><i class="mdi mdi-settings-outline"></i></span>
                                                    <span>Settings</span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div id="collapseFour" class="collapse" aria-labelledby="headingFour"
                                         data-parent="#accordionExample">
                                        <div class="card-body">

                                            <ul class="list-unstyled">
                                                <li>
                                                    <div class="setting-list">
                                                        <div class="setting-list-name">Media Auto Download</div>
                                                        <div class="setting-list-switch">
                                                            <div class="custom-control custom-switch">
                                                                <input type="checkbox" class="custom-control-input"
                                                                       id="customSwitch1">
                                                                <label class="custom-control-label"
                                                                       for="customSwitch1"></label>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </li>
                                                <li>
                                                    <div class="setting-list">
                                                        <div class="setting-list-name">Mute Conversation</div>
                                                        <div class="setting-list-switch">
                                                            <div class="custom-control custom-switch">
                                                                <input type="checkbox" class="custom-control-input"
                                                                       id="customSwitch2">
                                                                <label class="custom-control-label"
                                                                       for="customSwitch2"></label>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </li>
                                                <li>
                                                    <div class="setting-list">
                                                        <div class="setting-list-name">Notifications</div>
                                                        <div class="setting-list-switch">
                                                            <div class="custom-control custom-switch">
                                                                <input type="checkbox" class="custom-control-input"
                                                                       id="customSwitch3">
                                                                <label class="custom-control-label"
                                                                       for="customSwitch3"></label>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </li>
                                                <li>
                                                    <div class="setting-list">
                                                        <div class="setting-list-name">Block</div>
                                                        <div class="setting-list-switch">
                                                            <div class="custom-control custom-switch">
                                                                <input type="checkbox" class="custom-control-input"
                                                                       id="customSwitch4">
                                                                <label class="custom-control-label"
                                                                       for="customSwitch4"></label>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>


                            </div>
                        </div>
                    </div>
                    <!-- information panel end -->
                </div>
                <!-- conversations end -->
            </div>
        </div>
        <!-- main content end -->
    </div>
</div>
<!-- main wrapper end -->

<!-- Javascripts Files -->
<script src="dist/js/jquery-3.4.1.min.js"></script>
<script src="dist/js/popper.min.js"></script>
<script src="assets/vendors/bootstrap/bootstrap.bundle.min.js"></script>
<script src=""></script>
<script src="assets/vendors/perfect-scrollbar/perfect-scrollbar.min.js"></script>
<script src="assets/vendors/material-floating-button/dist/mfb.min.js"></script>
<script src="dist/js/main.min.js"></script>
<script src="dist/js/layer/layer.js"></script>
<script src="dist/js/OnlyOneLogin.js"></script>
<script type="text/javascript">
    var messageList = new Array();
    var imgMessage = new Array();
    var socket;
    var myName;

    $(function () {

        // 判断当前访问的设备
        var ua = navigator.userAgent.toLocaleLowerCase();
        var pf = navigator.platform.toLocaleLowerCase();
        var isAndroid = (/android/i).test(ua) || ((/iPhone|iPod|iPad/i).test(ua) && (/linux/i).test(pf))
            || (/ucweb.*linux/i.test(ua));
        var isIOS = (/iPhone|iPod|iPad/i).test(ua) && !isAndroid;
        var isWinPhone = (/Windows Phone|ZuneWP7/i).test(ua);
        var mobileType = {
            pc: !isAndroid && !isIOS && !isWinPhone,
            ios: isIOS,
            android: isAndroid,
            winPhone: isWinPhone
        };


        var token = document.cookie.toString().split("=")[1];


        var urlPath = window.document.location.href;
        var hostPath = "";
        if (urlPath.indexOf("http") != -1) {
            hostPath = urlPath.substring(7).split(":")[0];
        } else {
            hostPath = urlPath.split(":")[0];
        }

        // 查询好友列表
        $.post("getUserName", function (resultEntity) {
            if (resultEntity.resultFlag == true) {
                myName = resultEntity.data;

                $.post("getFriendList", {"userName": myName}, function (resultEntity) {
                    if (resultEntity.resultFlag == true) {
                        var friendList = resultEntity.data;
                        if (friendList != "--") {

                            $.post("getFriendDetail", {"userName": myName,"friendList": friendList}, function (resultEntity) {
                                if (resultEntity.resultFlag == true) {
                                    var friendHtml="";
                                    for (var i = 0; i < resultEntity.data.length; i++) {
                                        if (resultEntity.data[i].headImg!=null && resultEntity.data[i].headImg!=undefined && resultEntity.data[i].headImg!="") {
                                            friendHtml += "<li class=\"friendLi\" onclick=\"active(this)\" id=\"" + resultEntity.data[i].username + "\" num=\"" + i + "\">\n" +
                                                "<div class=\"conversation \">\n" +
                                                "\n" +
                                                "        <div class=\"user-avatar user-avatar-rounded online\">\n" +
                                                "            <div class=\"chatriq-user chatriq-user-11\"><img src=\""+resultEntity.data[i].headImg+"\"></div>\n" +
                                                "        </div>\n" +
                                                "        <div class=\"conversation__details\">\n" +
                                                "            <div class=\"conversation__name\">\n" +
                                                "                <div class=\"conversation__name--title\">" + resultEntity.data[i].username + "</div>\n" +
                                                "            </div>\n" +
                                                "            <div class=\"conversation__message\">\n" +
                                                "                <div class=\"conversation__message-preview\">\n" +
                                                "                    离线中......" +
                                                "                </div>\n" +
                                                "                <span><i class=\"mdi mdi-pin\"></i></span>\n" +
                                                "            </div>\n" +
                                                "        </div>\n" +
                                                "    </div>\n" +
                                                "</li>";
                                        }else{
                                            friendHtml += "<li class=\"friendLi\" onclick=\"active(this)\" id=\"" + resultEntity.data[i].username + "\" num=\"" + i + "\">\n" +
                                                "<div class=\"conversation \">\n" +
                                                "\n" +
                                                "        <div class=\"user-avatar user-avatar-rounded online\">\n" +
                                                "            <div class=\"chatriq-user chatriq-user-11\"></div>\n" +
                                                "        </div>\n" +
                                                "        <div class=\"conversation__details\">\n" +
                                                "            <div class=\"conversation__name\">\n" +
                                                "                <div class=\"conversation__name--title\">" + resultEntity.data[i].username + "</div>\n" +
                                                "            </div>\n" +
                                                "            <div class=\"conversation__message\">\n" +
                                                "                <div class=\"conversation__message-preview\">\n" +
                                                "                    离线中......" +
                                                "                </div>\n" +
                                                "                <span><i class=\"mdi mdi-pin\"></i></span>\n" +
                                                "            </div>\n" +
                                                "        </div>\n" +
                                                "    </div>\n" +
                                                "</li>";
                                        }
                                        messageList.push("");
                                        imgMessage.push("");
                                    }
                                    $("#friendList").html(friendHtml);

                                } else {
                                    layer.msg("获取好友列表失败...");
                                    return;
                                }
                            });



                            // 初始化聊天记录
                            var userName = myName;

                            $.post("getMessage", {
                                "userName": userName,
                                "friendList": friendList,
                                "token": token
                            }, function (resultEntity) {
                                if (resultEntity.resultFlag == true) {
                                    if (resultEntity.data == "目前无未读消息") {
                                        return
                                    }
                                    for (var i = 0; i < resultEntity.data.length; i++) {
                                        if (resultEntity.data[i] == null) {
                                            continue;
                                        }

                                        var messageListTemp = "";

                                        for (var j = 0; j < resultEntity.data[i].messages.length; j++) {
                                            if (resultEntity.data[i].messages[j].message.indexOf("qaz私聊wsx文件edc") == -1) {
                                                messageListTemp += resultEntity.data[i].messages[j].userName + "：" +
                                                    resultEntity.data[i].messages[j].message + "：" +
                                                    resultEntity.data[i].messages[j].time;
                                            } else {
                                                var fileMessage = resultEntity.data[i].messages[j].message;
                                                var userToUser = fileMessage.split("||")[1];
                                                var fileName = fileMessage.split("||")[2];
                                                var fileSize = fileMessage.split("||")[3];
                                                var fileClass = fileMessage.split("||")[4];

                                                messageListTemp += "qaz文wsx件edc" + resultEntity.data[i].messages[j].userName + "：" +
                                                    userToUser + "：文件名" + fileName + "：文件大小(byte)" + fileSize + "：文件类型" + fileClass + "：" +
                                                    resultEntity.data[i].messages[j].time;
                                            }
                                            if (j < resultEntity.data[i].messages.length - 1) {
                                                messageListTemp += "@@@"
                                            }
                                        }
                                        messageList[i] = messageListTemp;
                                    }

                                    //初始化pc端开启页面自动显示第一个聊天
                                    if (mobileType.pc) {
                                        $(".friendLi").each(function () {
                                            if ($(this).attr("num") == 0) {
                                                $(this).click();
                                                return;
                                            }
                                        });
                                        $(".friendLiActive").each(function () {
                                            if ($(this).attr("num") == 0) {
                                                $(this).click();
                                                return;
                                            }
                                        });
                                    }

                                } else {
                                    layer.msg("获取聊天记录失败，请刷新...")
                                }
                            });

                        } else {
                            return;
                        }
                        if (window.WebSocket) {
                            socket = new WebSocket("ws://" + hostPath + ":7000/ChatRoom");

                            socket.onmessage = function (message) {
                                var userName = message.data.toString().substring(9);
                                if (message.data.toString().indexOf("@@在线列表@@：") != -1) {
                                    var onlineFriend = userName.split(",");
                                    for (var i = 0; i < onlineFriend.length; i++) {
                                        $(".conversation__name--title").each(function () {
                                            if ($(this).text() == onlineFriend[i]) {
                                                $($(this).parent().next().children()[0]).text("在线中...");
                                            }
                                        })
                                    }
                                } else if (message.data.toString().indexOf("@@好友上线@@：") != -1) {
                                    $(".conversation__name--title").each(function () {
                                        if ($(this).text() == userName) {
                                            $($(this).parent().next().children()[0]).text("在线中...");
                                        }
                                    })
                                } else if (message.data.toString().indexOf("@@私聊来自@@：") != -1) {
                                    var userName0 = message.data.toString().split("：")[1];

                                    var num = $("#" + userName0).attr("num");

                                    var messageSplit = message.data.toString().substring(9).split("：");
                                    var userName00 = messageSplit[0];
                                    var message00 = messageSplit[1];
                                    var time00 = messageSplit[2];

                                    if (messageList[num] == "") {
                                        messageList[num] = messageList[num] + userName00 + "：" + message00 + "：" + time00;
                                    } else {
                                        messageList[num] = messageList[num] + "@@@" + userName00 + "：" + message00 + "：" + time00
                                    }

                                    if ($("#userName").text() == userName0) {
                                        active($(".friendLiActive"));
                                    }

                                } else if (message.data.toString().indexOf("@@私聊来自我@@：") != -1) {
                                    var userName1 = message.data.toString().split("：")[1];

                                    var num0 = $("#" + userName1).attr("num");

                                    var messageSplit11 = message.data.toString().substring(10).split("：");
                                    var userName11 = messageSplit11[0];
                                    var message11 = messageSplit11[1];
                                    var time11 = messageSplit11[2];

                                    if (messageList[num0] == "") {
                                        messageList[num0] = messageList[num0] + myName + "：" + message11 + "：" + time11;
                                    } else {
                                        messageList[num0] = messageList[num0] + "@@@" + myName + "：" + message11 + "：" + time11;
                                    }

                                    if ($("#userName").text() == userName1) {
                                        var $friendLiActive = $(".friendLiActive");
                                        active($friendLiActive[0]);
                                    }

                                } else if (message.data.toString().indexOf("@@私聊图片来自@@：") != -1) {
                                    var userName = message.data.toString().split("：")[1];
                                    var imgData = message.data.toString().split("：")[2];
                                    var time = message.data.toString().split("：")[3];
                                    var packNum = message.data.toString().split("：")[4];
                                    var totalNum = message.data.toString().split("：")[5];
                                    var num1 = $("#" + userName).attr("num");
                                    imgMessage[num1] = imgMessage[num1] += imgData;

                                    if (packNum == totalNum - 1) {
                                        if (messageList[num1] == "") {
                                            messageList[num1] = messageList[num1] + userName + "：" + imgMessage[num1] + "：" + time;
                                        } else {
                                            messageList[num1] = messageList[num1] + "@@@" + userName + "：" + imgMessage[num1] + "：" + time;
                                        }
                                        imgMessage[num1] = ""
                                    }

                                    if ($("#userName").text() == userName) {
                                        var $friendLiActive = $(".friendLiActive");
                                        active($friendLiActive[0]);
                                    }

                                } else if (message.data.toString().indexOf("@@私聊图片来自我@@：") != -1) {

                                    var userName = message.data.toString().split("：")[1];
                                    var imgData = message.data.toString().split("：")[2];
                                    var time = message.data.toString().split("：")[3];
                                    var packNum = message.data.toString().split("：")[4];
                                    var totalNum = message.data.toString().split("：")[5];
                                    var num1 = $("#" + userName).attr("num");
                                    imgMessage[num1] = imgMessage[num1] += imgData;

                                    if (packNum == totalNum - 1) {
                                        if (messageList[num1] == "") {
                                            messageList[num1] = messageList[num1] + myName + "：" + imgMessage[num1] + "：" + time;
                                        } else {
                                            messageList[num1] = messageList[num1] + "@@@" + myName + "：" + imgMessage[num1] + "：" + time;
                                        }
                                        imgMessage[num1] = ""
                                    }

                                    if ($("#userName").text() == userName) {
                                        var $friendLiActive = $(".friendLiActive");
                                        active($friendLiActive[0]);
                                    }


                                } else if (message.data.toString().indexOf("@@私聊文件来自@@：") != -1) {

                                    var userName2 = message.data.toString().split("：")[1];
                                    var userToUser2 = message.data.toString().split("：")[2];
                                    var fileName2 = message.data.toString().split("：")[3];
                                    var fileSize2 = message.data.toString().split("：")[4];
                                    var fileClass2 = message.data.toString().split("：")[5];
                                    var time2 = message.data.toString().split("：")[6];

                                    var num2 = $("#" + userName2).attr("num");


                                    if (messageList[num2] == "") {
                                        messageList[num2] = messageList[num2] + "qaz文wsx件edc" + userName2 + "：" + userToUser2 + "：" + fileName2;
                                        +"：" + fileSize2 + "：" + fileClass2 + "：" + time2;
                                    } else {
                                        messageList[num2] = messageList[num2] + "@@@" + "qaz文wsx件edc" + userName2 + "：" + userToUser2 + "：" + fileName2;
                                        +"：" + fileSize2 + "：" + fileClass2 + "：" + time2;
                                    }


                                    if ($("#userName").text() == userName2) {
                                        var $friendLiActive = $(".friendLiActive");
                                        active($friendLiActive[0]);
                                    }


                                } else if (message.data.toString().indexOf("@@私聊文件来自我@@：") != -1) {

                                    var userName3 = message.data.toString().split("：")[1];
                                    var userToUser3 = message.data.toString().split("：")[2];
                                    var fileName3 = message.data.toString().split("：")[3];
                                    var fileSize3 = message.data.toString().split("：")[4];
                                    var fileClass3 = message.data.toString().split("：")[5];
                                    var time3 = message.data.toString().split("：")[6];

                                    var num3 = $("#" + userName3).attr("num");


                                    if (messageList[num3] == "") {
                                        messageList[num3] = messageList[num3] + "qaz文wsx件edc" + myName + "：" + userToUser3 + "：" + fileName3 + "：" + fileSize3 + "：" + fileClass3 + "：" + time3;
                                    } else {
                                        messageList[num3] = messageList[num3] + "@@@" + "qaz文wsx件edc" + myName + "：" + userToUser3 + "：" + fileName3 + "：" + fileSize3 + "：" + fileClass3 + "：" + time3;
                                    }


                                    if ($("#userName").text() == userName3) {
                                        var $friendLiActive = $(".friendLiActive");
                                        active($friendLiActive[0]);
                                    }


                                } else if (message.data.toString().indexOf("@@好友下线@@：") != -1) {
                                    $(".conversation__name--title").each(function () {
                                        if ($(this).text() == userName) {
                                            $($(this).parent().next().children()[0]).text("离线中...");
                                        }
                                    })
                                } else if (message.data.toString().indexOf("@@长时间未操作@@：") != -1) {
                                    alert("由于您长时间未操作，连接已被关闭，请重新刷新页面...")
                                }
                            };
                            socket.onopen = function (message) {
                                socket.send("@@好友上线@@：" + myName + "：@@好友列表@@：" + friendList)
                            };
                            socket.onclose = function (message) {
                                layer.msg("服务器似乎挂了...")
                            };
                        } else {
                            layer.msg("当前浏览器不支持websocket")
                        }

                    } else {
                        layer.msg("获取好友列表失败...")
                    }
                });
            } else {
                layer.msg("您似乎未登录...")
            }
        });

        //发送私聊
        $(".mdi-send").click(function () {
            var reciver = $("#userName").text();
            var message = $("textarea").val();
            if (message.indexOf("prompt") != -1 || message.indexOf("alert") != -1 || message.indexOf("window.open") != -1) {
                layer.msg("请不要发布弹窗代码...")
                return;
            }
            socket.send("@@私聊@@：" + reciver + "：" + message);
            $("textarea").val("");
        });


        //寻找用户
        $("#findUser").click(function () {
            var userName = $("#findUserName").val();
            if (userName == "" || userName == undefined) {
                layer.msg("昵称为空...")
                return;
            }
            $.post("findUser", {"userName": userName}, function (resultEntity) {
                if (resultEntity.resultFlag == true) {
                    var OnlinePeopleList = "<ul class=\"list-unstyled\" >";
                    for (var i = 0; i < resultEntity.data.length; i++) {
                        OnlinePeopleList += "<li>\n" +
                            "                                        <div class=\"conversation \">\n" +
                            "\n" +
                            "                                            <div class=\"user-avatar user-avatar-rounded online\">\n" +
                            "                                                <div class=\"chatriq-user chatriq-user-11\"></div>\n" +
                            "                                            </div>\n" +
                            "                                            <div class=\"conversation__details\">\n" +
                            "                                                <div class=\"conversation__name\">\n" +
                            "                                                    <div class=\"conversation__name--title\">" + resultEntity.data[i] + "</div>\n" +
                            "                                                </div>\n" +
                            "                                                <div class=\"conversation__message\">\n" +
                            "                                                    <span><i class=\"mdi mdi-plus\" onclick=\"addFriend(this)\" id=\"" + resultEntity.data[i] + "\"></i></span>\n" +
                            "                                                </div>\n" +
                            "                                            </div>\n" +
                            "                                        </div>\n" +
                            "                                    </li>";
                    }
                    OnlinePeopleList += "</ul>";

                    var height = Number($(window).height()) * 0.8;
                    var width = Number($(window).width()) * 0.8;
                    layer.open({
                        type: 1,
                        skin: 'layui-layer-rim', //加上边框
                        area: [width + 'px', height + 'px'], //宽高
                        content: OnlinePeopleList,
                        title: '用户搜索结果'
                    });
                } else {
                    layer.msg("用户不存在...")
                }
            });
        });
    });

    function active(obj) {
        $(".friendLi").each(function () {
            $(this).removeClass("active");
            $(this).removeClass("friendLiActive");
        });
        $(obj).addClass("active");
        $(obj).addClass("friendLiActive");
        $(".chatapp__conversations").addClass("open");
        var userName = $($($($($(obj).children()[0]).children()[1]).children()[0]).children()[0]).text();
        $("#userName").text(userName);


        var num = $("#" + userName).attr("num");

        if (messageList[num] == "" || messageList[num] == undefined) {
            $("#messageHtml").html("");
            return;
        }

        var messageList0 = messageList[num].toString().split("@@@");
        var messageListHtml = "";
        var userName0 = "";
        var message0 = "";
        var userToUser = "";
        var fileName = "";
        var fileSize = "";
        var fileClass = "";
        var time0 = "";
        var milliseconds = new Date().getTime();


        for (var i = 0; i < messageList0.length; i++) {

            userName0 = messageList0[i].split("：")[0];
            if (messageList0[i].indexOf("qaz文wsx件edc") == -1) {
                message0 = messageList0[i].split("：")[1];
                time0 = messageList0[i].split("：")[2];
                if (userName0 != userName) {
                    messageListHtml += "<li class=\"message sent\">\n" +
                        "             <div class=\"message__text\" style=\"margin-left: 2%\">\n" +
                        "                 <div class=\"conversation__name\">\n" +
                        "                     <div class=\"conversation__name--title\" style=\"font-size: 120%\">我：</div>\n" +
                        "                 </div>\n" +
                        "                 <div>" +
                        message0 +
                        "                 </div>\n" +
                        "                 <div class=\"metadata\">\n" +
                        "                     <span class=\"time\">" + time0 + "</span>\n" +
                        "                 </div>\n" +
                        "             </div>\n" +
                        "             <div class=\"user-avatar user-avatar-rounded\" style=\"margin-left: 2%\">\n" +
                        "                 <div class=\"chatriq-user chatriq-user-11\"></div>\n" +
                        "             </div>\n" +
                        "             <div class=\"message__options\"><i class=\" mdi mdi-dots-horizontal\" ></i></div>\n" +
                        "          </li>";
                } else {
                    messageListHtml += "<li class=\"message received\">\n" +
                        "<div class=\"user-avatar user-avatar-rounded\">\n" +
                        "    <div class=\"chatriq-user chatriq-user-11\"></div>\n" +
                        "</div>\n" +
                        "<div class=\"message__text\" style=\"margin-right: 2%\">\n" +
                        "    <div class=\"conversation__name\">\n" +
                        "        <div class=\"conversation__name--title\" style=\"font-size: 120%\">" + userName0 + "：</div>\n" +
                        "    </div>\n" +
                        "    <div class=\"theMessage\">\n" +
                        message0 +
                        "    </div>\n" +
                        "    <div class=\"metadata\">\n" +
                        "        <span class=\"time\">" + time0 + "</span>\n" +
                        "    </div>\n" +
                        "</div>\n" +
                        "<div class=\"message__options\"><i class=\" mdi mdi-dots-horizontal\" ></i></div>\n" +
                        "          </li>";
                }
            } else {
                userName0 = messageList0[i].split("：")[0].substring(11);
                userToUser = messageList0[i].split("：")[1];
                fileName = messageList0[i].split("：")[2].substring(3);
                fileSize = Number(messageList0[i].split("：")[3].substring(10));
                fileClass = messageList0[i].split("：")[4].substring(4);
                time0 = messageList0[i].split("：")[5];

                if (fileSize < 1024) {
                    fileSize = String(fileSize) + "byte";
                } else if (fileSize < 1024 * 1024) {
                    fileSize = String(Math.floor(fileSize / 1024 * 100) / 100) + "kb";
                } else {
                    fileSize = String(Math.floor(fileSize / 1024 / 1024 * 100) / 100) + "mb";
                }

                var saveYear = Number(time0.split(" ")[0].split("-")[0]);
                var saveMonth = Number(time0.split(" ")[0].split("-")[1]) - 1;
                var saveDay = Number(time0.split(" ")[0].split("-")[2]);
                var saveHour = Number(time0.split(" ")[1].split(":")[0]);
                var saveMinute = Number(time0.split(" ")[1].split(":")[1]);
                var saveSecond = Number(time0.split(" ")[1].split(":")[2]);
                var millisec = new Date(saveYear, saveMonth, saveDay, saveHour, saveMinute, saveSecond).getTime();


                if (userName0 != userName) {
                    messageListHtml += "<li class=\"message sent\">\n" +
                        "    <div class=\"message__text\" style=\"margin-left: 2%\">\n" +
                        "        <div class=\"conversation__name\">\n" +
                        "            <div class=\"conversation__name--title\" style=\"font-size: 120%\">\n" +
                        "                我：\n" +
                        "            </div>\n" +
                        "        </div>\n" +
                        "        <div style=\"margin-top: 2%;cursor: pointer\"><a onclick='downFile(this)' fileMessage='" + userToUser + "@@" + fileName + "' >" +
                        "<span style=\"padding-left: 5%;padding-right: 5%;font-size: 130%;font-weight: bold\">" + fileName + "</span>\n" +
                        "<img src=\"assets/images/file1.png\" style=\"width: 100%\"></a></div>\n" +
                        "        <div class=\"metadata\">\n" +
                        "            <span class=\"time\">" + fileSize + "&nbsp;&nbsp;" + time0 + "</span>\n" +
                        "        </div>\n" +
                        "    </div>\n" +
                        "    <div class=\"user-avatar user-avatar-rounded\" style=\"margin-left: 2%\">\n" +
                        "        <div class=\"chatriq-user chatriq-user-11\"></div>\n" +
                        "    </div>\n" +
                        "    <div class=\"message__options\"><i class=\" mdi mdi-dots-horizontal\"></i>\n" +
                        "    </div>\n" +
                        "</li>";

                } else {
                    messageListHtml += "<li class=\"message received\">\n" +
                        "<div class=\"user-avatar user-avatar-rounded\">\n" +
                        "    <div class=\"chatriq-user chatriq-user-11\"></div>\n" +
                        "</div>\n" +
                        "<div class=\"message__text\" style=\"margin-right: 2%\">\n" +
                        "    <div class=\"conversation__name\">\n" +
                        "        <div class=\"conversation__name--title\" style=\"font-size: 120%\">" + userName0 + "：</div>\n" +
                        "    </div>\n" +
                        "    <div style=\"margin-top: 2%;cursor: pointer\"><a onclick='downFile(this)' fileMessage='" + userToUser + "@@" + fileName + "'>" +
                        "<span style=\"padding-left: 5%;padding-right: 5%;font-size: 130%;font-weight: bold\">" + fileName + "</span>\n" +
                        "<img src=\"assets/images/file1.png\" style=\"width: 100%\"></a></div>\n" +
                        "    <div class=\"metadata\">\n" +
                        "        <span class=\"time\">" + fileSize + "&nbsp;&nbsp;" + time0 + "</span>\n" +
                        "    </div>\n" +
                        "</div>\n" +
                        "<div class=\"message__options\"><i class=\" mdi mdi-dots-horizontal\" ></i></div>\n" +
                        "          </li>";


                }

            }
        }

        $("#messageHtml").html(messageListHtml);
    }

    function chooseImg() {
        $("#chooseImg").click();
    }

    function chooseFile() {
        $("#chooseFile").click();
    }

    //发送图片
    function sendImg() {
        var file = document.getElementById('chooseImg').files[0];
        if (file == undefined) {
            return;
        }

        var type = file.type;


        var reader = new FileReader();
        reader.onloadend = function () {
            var img = reader.result.toString();
            var reciver = $("#userName").text();

            console.log(img.length)

            //处理缩放，转格式

            compress(img, callback);

            function callback(base64) {
                var img1 = base64;
                var img0 = "<img src=\"" + img1 + "\" style=\"margin-top: 2%;width: 100%\" alt=\"图片加载失败...\">";
                var num = Math.floor(img0.length / 60000);
                if (img0.length % 60000 != 0) {
                    num++;
                }
                for (var i = 0; i < num; i++) {
                    if (i == num - 1) {
                        socket.send("@@私聊图片@@：" + reciver + "：" + img0.substring(i * 60000) + "：" + i + "：" + num);
                    } else {
                        socket.send("@@私聊图片@@：" + reciver + "：" + img0.substring(i * 60000, i * 60000 + 60000) + "：" + i + "：" + num);
                    }
                }
            }


        };
        if (file) {
            reader.readAsDataURL(file);
        }
    }


    //第一个参数就是原来的字符串，第二个是宽度，第三个就是回调方法
    function compress(base64, callback) {
        var newImage = new Image();
        var quality = 0.6;    //压缩系数0-1之间
        newImage.src = base64;
        newImage.setAttribute("crossOrigin", 'Anonymous');  //url为外域时需要
        var imgWidth, imgHeight;
        newImage.onload = function () {
            imgWidth = this.width;

            imgHeight = this.height;

            var canvas = document.createElement("canvas");
            var ctx = canvas.getContext("2d");
            canvas.width = imgWidth;
            canvas.height = imgHeight;
            quality = 0.0001;
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            ctx.drawImage(this, 0, 0, canvas.width, canvas.height);
            var base64 = canvas.toDataURL("image/jpeg", quality); //压缩语句
            // 如想确保图片压缩到自己想要的尺寸,如要求在50-150kb之间，请加以下语句，quality初始值根据情况自定

            base64 = canvas.toDataURL("image/jpeg", quality);

            // 防止最后一次压缩低于最低尺寸，只要quality递减合理，无需考虑
            // while (base64.length / 1024 < 50) {
            //     quality += 0.001;
            //     base64 = canvas.toDataURL("image/jpeg", quality);
            // }
            console.log(base64.length)
            callback(base64);//必须通过回调函数返回，否则无法及时拿到该值
        }
    }

    //发送文件
    function sendFile() {
        var formData = new FormData();
        var file = document.getElementById('chooseFile').files[0];

        var name = file.name;
        var size = file.size;
        if (size > 10 * 1024 * 1024) {
            layer.msg("上传文件不能超过10M...")
            return;
        }
        var type = name.split(".")[name.split(".").length - 1];

        var reciverName = $("#userName").text();

        var key = "@@私聊文件@@：" + myName + "_to_" + reciverName + "：" + "文件名" + name + "：" + "文件大小(byte)" + size + "：" + "文件类型" + type;

        formData.append("name", key);
        formData.append("file", file);

        $.ajax({
            url: "/sendFile",
            type: "POST",
            data: formData,
            processData: false,  // 告诉jQuery不要去处理发送的数据
            contentType: false,   // 告诉jQuery不要去设置Content-Type请求头
            success: function () {
                layer.msg("上传成功！");
                socket.send(key);
            },
            error: function () {
                layer.msg("上传失败！");
            }
        });
    }

    function downFile(obj) {
        var fileMessage = $(obj).attr("fileMessage");
        var userToUser = fileMessage.split("@@")[0];
        var fileName = fileMessage.split("@@")[1];
        $.post("fileExist", {"userToUser": userToUser, "fileName": fileName}, function (resultEntity) {
            if (resultEntity.resultFlag == false) {
                $(obj).attr("onclick", "layer.msg(\"文件已经过期...\")");
                layer.msg("文件已经过期...");
            } else {
                window.location.replace("/getFile?fileMessage=" + fileMessage);
            }
        });
    }

    function addFriend(obj) {
        var targetName = $(obj).attr("id");
        var userName = myName;

        if (userName == targetName) {
            layer.msg("无法添加自己...");
            return;
        }
        $.post("addFriend", {"userName": userName, "targetName": targetName}, function (resultEntity) {
            if (resultEntity.resultFlag == true) {
                layer.msg("添加好友成功...")
            } else {
                layer.msg("您已经添加过该好友...")
            }
        });
    }

</script>
</body>
</html>
